<template>
  <el-dialog :title="title" v-if="dialogFormVisible" v-model="dialogFormVisible" :width="dWidth"
             :before-close="cancelClick" :close-on-click-modal="false">
    <div class="el-dialog-content-form">
      <Form ref="dialogForm" v-if="dialogFormVisible" :labelWidth="labelWidth" :splitCol="splitCol" :gutter="gutter"
            :items="items" :rules="rules"
            @validateSuccess="validateSuccess" @loadSuccess="loadSuccess" @updateDataSuccess="updateDataSuccess"
            :dataChange="dataChange">
        <template v-for="name in Object.keys($slots)" :key="name" #[name]='scope'>
          <slot :name="name" v-bind="scope"></slot>
        </template>
      </Form>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>

import {computed, onMounted, reactive, ref, toRaw, toRef, nextTick, getCurrentInstance} from "vue";
import Form from "@/components/plugs/form/Form.vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import type {DialogFormInterface, FormView} from "@/components/plugs/form/DialogFormInterface.ts";

const emits = defineEmits(["validateSuccess", "loadSuccess", "updateDataSuccess"]);
const props = withDefaults(defineProps<DialogFormInterface>(), {
  title: '',
  width: '800px',
  beforeClose: function () {
    return true
  },
  dataChange: (oldValue: object, newValue: object, field: string) => {},
  form: () => ({
    labelWidth: 100,
    splitCol: 1,
    gutter: 20,
    items: [],
    rules: {}
  })
});
const {width, form, title, beforeClose} = props;
const {splitCol, gutter, items, rules, labelWidth} = form
const dialogForm: any = ref(null);

onMounted(() => {
  var obj = this;
});


let rTitle = computed(() => {
  return (title == undefined || title == null) ? "" : title;
});

let dWidth = computed(() => {
  return (width == undefined || width == '') ? "70%" : width;
});

const dialogFormVisible = ref(false);

const cancelClick = (done:object) => {
  if (!beforeClose()) {
    return;
  }
  ElMessageBox.confirm(
      '是否关闭弹窗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    console.log('确认');
    done();
  }).catch(() => {
    console.log('取消')
  });
};

const validateSuccess = (formData: any) => {
  emits('validateSuccess', formData);
}

const show = (callBack: () => {}) => {
  dialogFormVisible.value = true;
  if (callBack == undefined) {
    return;
  }
  nextTick(() => {
    callBack();
  })
}

const restForm = () => {
  nextTick(() => {
    dialogForm.value.resetForm();
  });
}

const close = () => {
  dialogFormVisible.value = false;
}

const getFormData = () => {
  return dialogForm.value.getFormData();
}

const setData = (data: any) => {
  nextTick(() => {
    dialogForm.value.setData(data);
  });
}

const loadSuccess = () => {
  emits("loadSuccess");
}

const updateDataSuccess = () => {
  emits('updateDataSuccess');
}

const triggerField = (fields: [], state?: boolean) => {
  nextTick(() => {
    dialogForm.value.triggerField(fields, state);
  });
}

const triggerAllField = (state?: boolean) => {
  nextTick(() => {
    dialogForm.value.triggerAllField(state);
  });
}

defineExpose({show, close, getFormData, setData, restForm, triggerField,triggerAllField});


</script>

<style scoped>

</style>